<template>
  <view class="fu-input" :class="[`fu-input--${type}`, { 'fu-input--disabled': disabled }]">
    <!-- 左侧图标和前缀插槽 -->
    <view v-if="prefixIcon || $slots.prefix" class="fu-input__prefix">
      <slot name="prefix">
        <text v-if="prefixIcon" :class="prefixIcon"></text>
      </slot>
    </view>
    
    <!-- 前置内容插槽 -->
    <view v-if="$slots.prepend" class="fu-input__prepend">
      <slot name="prepend"></slot>
    </view>
    
    <!-- 输入框 -->
    <input
      class="fu-input__inner"
      :value="modelValue"
      :type="type"
      :password="password"
      :placeholder="placeholder"
      :placeholder-style="placeholderStyle"
      :disabled="disabled"
      :maxlength="maxlength"
      :focus="focus"
      :confirm-type="confirmType"
      :cursor-spacing="cursorSpacing"
      :adjust-position="adjustPosition"
      :hold-keyboard="holdKeyboard"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      @confirm="handleConfirm"
      @keyboardheightchange="handleKeyboardHeightChange"
    />
    
    <!-- 后置内容插槽 -->
    <view v-if="$slots.append" class="fu-input__append">
      <slot name="append"></slot>
    </view>
    
    <!-- 右侧图标和后缀插槽 -->
    <view v-if="suffixIcon || clearable || $slots.suffix" class="fu-input__suffix">
      <slot name="suffix">
        <text 
          v-if="clearable && modelValue" 
          class="fu-icon-clear"
          @click="handleClear"
        ></text>
        <text v-else-if="suffixIcon" :class="suffixIcon"></text>
      </slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-input 输入框组件
 * @description 基础表单输入组件
 * @property {String | Number} modelValue - 输入框的值
 * @property {String} type - 输入框类型，可选值：text/number/idcard/digit/password
 * @property {String} placeholder - 输入框占位文本
 * @property {String} placeholderStyle - placeholder的样式
 * @property {Boolean} password - 是否是密码类型
 * @property {Boolean} disabled - 是否禁用
 * @property {Number} maxlength - 最大输入长度
 * @property {Boolean} focus - 是否自动获取焦点
 * @property {String} confirmType - 设置键盘右下角按钮的文字
 * @property {Number} cursorSpacing - 指定光标与键盘的距离
 * @property {Boolean} adjustPosition - 键盘弹起时，是否自动上推页面
 * @property {Boolean} holdKeyboard - 点击清除图标时，是否保持键盘不收起
 * @property {String} prefixIcon - 输入框头部图标
 * @property {String} suffixIcon - 输入框尾部图标
 * @property {Boolean} clearable - 是否可清空
 * @slot prefix - 输入框头部内容
 * @slot suffix - 输入框尾部内容
 * @slot prepend - 输入框前置内容
 * @slot append - 输入框后置内容
 * @event {Function} update:modelValue - 输入框内容更新时触发
 * @event {Function} focus - 输入框聚焦时触发
 * @event {Function} blur - 输入框失焦时触发
 * @event {Function} confirm - 点击完成按钮时触发
 * @event {Function} clear - 点击清除按钮时触发
 * @event {Function} keyboardheightchange - 键盘高度发生变化的时候触发
 */
export default {
  name: 'fu-input',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    placeholderStyle: {
      type: String,
      default: ''
    },
    password: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: -1
    },
    focus: {
      type: Boolean,
      default: false
    },
    confirmType: {
      type: String,
      default: 'done'
    },
    cursorSpacing: {
      type: Number,
      default: 0
    },
    adjustPosition: {
      type: Boolean,
      default: true
    },
    holdKeyboard: {
      type: Boolean,
      default: false
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'focus', 'blur', 'confirm', 'clear', 'keyboardheightchange'],
  methods: {
    handleInput(event) {
      const value = event.detail.value
      this.$emit('update:modelValue', value)
    },
    handleFocus(event) {
      this.$emit('focus', event)
    },
    handleBlur(event) {
      this.$emit('blur', event)
    },
    handleConfirm(event) {
      this.$emit('confirm', event)
    },
    handleClear() {
      this.$emit('update:modelValue', '')
      this.$emit('clear')
    },
    handleKeyboardHeightChange(event) {
      this.$emit('keyboardheightchange', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border-radius: var(--fu-radius-base);
  border: 2rpx solid var(--fu-border-color);
  box-sizing: border-box;
  transition: all 0.2s;
  
  &:hover {
    border-color: var(--fu-primary-color);
  }
  
  &--disabled {
    background-color: #f5f7fa;
    border-color: var(--fu-border-color);
    cursor: not-allowed;
    
    .fu-input__inner {
      color: var(--fu-text-color-disabled);
      -webkit-text-fill-color: var(--fu-text-color-disabled);
      cursor: not-allowed;
    }
  }
  
  &__prepend,
  &__append {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    background-color: #f5f7fa;
    color: var(--fu-text-color-secondary);
    white-space: nowrap;
    
    &:first-child {
      border-right: 2rpx solid var(--fu-border-color);
      border-top-left-radius: var(--fu-radius-base);
      border-bottom-left-radius: var(--fu-radius-base);
    }
    
    &:last-child {
      border-left: 2rpx solid var(--fu-border-color);
      border-top-right-radius: var(--fu-radius-base);
      border-bottom-right-radius: var(--fu-radius-base);
    }
  }
  
  &__prefix,
  &__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    color: var(--fu-text-color-secondary);
    
    .fu-icon-clear {
      cursor: pointer;
      
      &:hover {
        color: var(--fu-text-color);
      }
    }
  }
  
  &__inner {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 20rpx;
    color: var(--fu-text-color);
    font-size: var(--fu-font-size-base);
    background: none;
    border: none;
    outline: none;
    box-sizing: border-box;
    
    &::placeholder {
      color: var(--fu-text-color-disabled);
    }
  }
}
</style> 